<!--  我的订单-->
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
  <meta name="divport" content="width=device-width,initial-scale=1,user-scalable=no" />
  <meta name="format-detection" content="telephone=no,email=no,date=no,address=no" />
	<title>  我的订单</title>
	<link rel="stylesheet" href="../plugin/hhframe/hhframe.min.css" />
	<link rel="stylesheet" href="../style/index.css"/>
	<style>

			.header-bc{
				background-color: #fff;
			}

			.index-header{
				display: flex;
				height: 50px;
				width: 100%;
				justify-content: center;
				align-items: center;
				background-color: #fff;
				color: #000001;
				font-size:18px;
			}
			.index-nav{
				display: flex;
				height: 50px;
				width:100%;
				justify-content:space-around;
				align-items: center;
				background-color: #3E3B47;
				color: #FEFEFE;
				font-size: 15px;
			}
			.xiahuaxian-row{
				position:relative;
			}
			.xiahuaxian{
				position: absolute;
				top: -5px;
				left: -7px;
				width: 75px;
				height: 8px;
				float:left;
				border-radius:4px;
				background: linear-gradient(to right, rgba(246,224,166,0.9) ,rgba(196,161,98,0.9));
			}
			.row{
				display: flex;
				justify-content: space-around;
				height: 40px;
				color: #999999;
				padding: 0 10px;
				font-size: 15px;
				background-color: #fff;
			}
			.menu{
					display: flex;
					align-items: center;
					justify-content: center;
					padding: 5px;

			}
			.selected{
				border-bottom: solid #FF502D 2px;
				color: #FF502D;
			}

	</style>
</head>
<body>
	<!-- 标题栏 -->
		<div id="header" class="header-bc framepage">
			<!-- 返回按钮 -->
			<div style="position: absolute;color: #000;line-height: 45px;padding: 0 20px;" onclick="closeWin()">
  				<div style="transform: rotateY(180deg);font-size: 18px;margin-top:5px" class="icon iconfont">&#xe644;</div>
					<!-- <div style="transform: rotateY(180deg);font-size: 20px;font-weight: 600;" class="iconfont iconjiantou"></div> -->
			</div>
			<!-- 标题 -->
			<div class="index-header">
					订单列表
			</div>
			<!-- 导航 -->
			<div id="nav" class="row">
					<div class="menu selected" tapmode="selected" onclick="fnSetNavMenuIndex(0);">全部</div>
					<div class="menu" tapmode="selected" onclick="fnSetNavMenuIndex(1);">待支付</div>
					<div class="menu" tapmode="selected" onclick="fnSetNavMenuIndex(2);">待发货</div>
					<div class="menu" tapmode="selected" onclick="fnSetNavMenuIndex(3);">已发货</div>
					<div class="menu" tapmode="selected" onclick="fnSetNavMenuIndex(4);">已完成</div>
					<div class="menu" tapmode="selected" onclick="fnSetNavMenuIndex(5);">退款/售后</div>
			</div>
		</div>


</body>
<script src="../plugin/jquery.js"></script>
<script src="../plugin/vue.all.js"></script>
<script src="../plugin/hhframe/hhframe.min.js"></script>
<script src="../plugin/public.js"></script>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript">
window.addEventListener("apiready",function(){



	var header = $api.byId('header');

	// 实现沉浸式状态栏效果
	$api.fixStatusBar(header);

	// 计算header和nav元素的高度
	headerH = $api.offset(header).h;

	// 获取所有的分类菜单
	menus = $api.domAll(nav, '.menu');
	 openFrames();
	 // 监听页面打开
 	 api.addEventListener({
 			 name: 'viewappear'
 	 }, function(ret, err) {
 			setTimeout(function() {
 				api.setStatusBarStyle({
 						style: 'dark'
 				});
 			}, 250)
 	 });

});

var framesOpened = false,
    menus, headerH, navH, bMap, city;

// 打开商品列表FrameGroup和mini购物车Frame
function openFrames() {

    // 判断这些Frame是否已经打开
    if (framesOpened) {
        return;
    }

    // 构造FrameGroup中的Frame数组
    var frames = [];
    for (var i = 0; i < menus.length; i++) {
        frames.push({
            name: 'personal_my_order_frame_' + i,
            url: './personal_my_order_frame_'+ i +'.html',
            pageParam: {
                index: i
            }
        });
    }

		// api.openFrameGroup({
		//     name: "order",
		//     background: "#f5f5f5",
		//     rect: {
		//      marginTop: head_h+tbar_h,
		//      marginBottom: foot_h
		//     },
		//     frames: [
		//      {name:"order02",url:"order_list.html",pageParam:{state:""}},
		//      {name:"order03",url:"order_list.html",pageParam:{state:3}},
		//      {name:"order04",url:"order_list.html",pageParam:{state:4}},
		//      {name:"order03",url:"order_list.html",pageParam:{state:3}},
		//      {name:"order04",url:"order_list.html",pageParam:{state:4}}
		//     ],
		//     preload: 0,
		//     index: 0
		//    },function(ret,err){
		//     vm.idx = ret.index;
		//    });

    // 打开FrameGroup
    api.openFrameGroup({
        name: 'personal_my_orderGroup',
        scrollEnabled: true, // 支持手势滑动切换
        rect: {
            x: 0,
            y: headerH,
            w: 'auto', // 自动填充所在Window的宽度
            h: 'auto' // 自动填充所在Window的高度
        },
        index: api.pageParam.id, // 默认显示第一个Frame
        frames: frames,
        preload: frames.length // 预加载所有Frame
    }, function(ret, err) {
        // Frame切换完成的响应函数，更新分类菜单的选中状态
        fnSetNavMenuSelected(ret.index);
    });


    // 标记为已经打开
    framesOpened = true;
}


// 分类菜单点击的响应函数，切换Frame
function fnSetNavMenuIndex(index_) {
    // 首先更新菜单选中状态
    fnSetNavMenuSelected(index_);

    // 切换FrameGroup中的当前Frame
    api.setFrameGroupIndex({
        name: 'personal_my_orderGroup',
        index: index_,
        scroll: true
    });
}

// 更新分类菜单的选中状态
function fnSetNavMenuSelected(index_) {
		// 打卡Frame窗口广播
		api.sendEvent({
			name: 'myOpenFrame',
			extra: {
					index: index_,
			}
		});
    for (var i = 0; i < menus.length; i++) {
        if (index_ == i) {
            $api.addCls(menus[i], 'selected');
        } else {
            $api.removeCls(menus[i], 'selected');
        }
    }
}

</script>
</html>
